<script>
import { computed, defineComponent, ref } from 'vue'
import {useCounterStore} from '../stores'
import { useRoute, useRouter } from 'vue-router'
export default defineComponent({
    setup() {
        const router=useRouter()
        const route=useRoute()
        const store=useCounterStore()
        const isCollapse=computed(()=>{
            return store.isCollapse
        })
        function home(){
            router.push('/homeMain')
        }
        function calendar(){
          router.push('/calendar')
        }
        function create(){
          router.push('/create')
        }
        function myTask(){
          router.push('/myTask')
        }
        function edit(){
          router.push('/edit')
        }
        function personnel(){
          router.push('/personnel')
        }
        return{
            isCollapse,
            home,
            calendar,
            create,
            myTask,
            edit,
            personnel,
        }
    },
})

</script>

<template>
  <el-menu
    default-active="2"
    class="el-menu-vertical-demo"
    :collapse="isCollapse"
  >
    <el-menu-item index="1" @click="home()">
      <el-icon class="hvr-grow iconfont icon-xianshi" style="color:#409EFC"></el-icon>
      <template #title>显示盘</template>
    </el-menu-item>
    <el-menu-item index="2" @click="calendar()">
      <el-icon class="hvr-grow iconfont icon-rili" style="color:#409EFC"></el-icon>
      <template #title>日历</template>
    </el-menu-item>
    <el-menu-item index="3" @click="personnel()">
      <el-icon class="hvr-grow iconfont icon-renyuan" style="color:#409EFC"></el-icon>
      <template #title>人员</template>
    </el-menu-item>
    <el-sub-menu index="4">
      <template #title>
          <el-icon class="hvr-grow"><location color="#409EFC"/></el-icon>
          <span >流程中心</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="4-1" class="hvr-underline-from-center" @click="edit()">
          <el-icon class="hvr-grow " ><Promotion color="#409EFC"/></el-icon>
          管理任务
        </el-menu-item>
        <el-menu-item index="4-2" class="hvr-underline-from-center" @click="myTask()">
          <el-icon class="hvr-grow"><Finished color="#409EFC"/></el-icon>
          我的任务
        </el-menu-item>
        <el-menu-item index="4-3" class="hvr-underline-from-center" @click="create()">
          <el-icon class="hvr-grow"><DocumentAdd color="#409EFC"/></el-icon>
          新增任务
        </el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>
  </el-menu>
</template>

<style scoped lang="scss">
.el-menu {
height: 689px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height:696px;

}
header{
  border-bottom: 1px solid #c6c6c6;
}
</style>
